<template>
  <div>
    <div class="modal-header">
      <div class="modal-title">{{ l('MySettings') }}</div>
    </div>
    <div class="modal-body">
      <a-form
        :model="currentUserProfileEditDto"
        layout="vertical"
        @submit="save"
        ref="formRef"
        :rules="rules"
      >
        <!-- 用户名(登陆使用) -->
        <a-form-item :label="l('UserName')" has-feedback name="userName">
          <a-input
            type="text"
            :disabled="isAdmin"
            v-model:value="currentUserProfileEditDto.userName"
            required
          />
        </a-form-item>

        <!-- 手机号码 -->
        <a-form-item :label="l('PhoneNumber')" has-feedback name="phoneNumber">
          <a-input
            :placeholder="l('PhoneNumber')"
            type="text"
            v-model:value="currentUserProfileEditDto.phoneNumber"
          />
        </a-form-item>
        <!-- 邮箱地址 -->
        <a-form-item :label="l('EmailAddress')" has-feedback name="emailAddress">
          <a-input
            type="email"
            :placeholder="l('EmailAddress')"
            v-model:value="currentUserProfileEditDto.emailAddress"
          />
        </a-form-item>
      </a-form>
    </div>
    <!-- 功能按钮 -->
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" nz-button type="button">
        {{ l('Cancel') }}
      </a-button>
      <a-button html-type="submit" type="primary" @click="save" :loading="saveLoading">
        {{ l('Save') }}
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { CurrentUserProfileEditDto, ProfileServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'my-settings',
    mixins: [ModalComponentBase],
    data() {
      return {
        saveLoading: false,
        form: {
          userName: '',
          PhoneNumber: '',
          EmailAddress: '',
        },
        rules: {
          userName: [
            {
              required: true,
              message: this.l('StoredCardUserNameInputDesc'),
              trigger: 'blur',
            },
          ],
          phoneNumber: [
            {
              pattern:
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: this.l('EnterFormatIsNotCorrect'),
              trigger: 'blur',
            },
          ],
          emailAddress: [
            {
              pattern: '^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$',
              message: this.l('NotEmail'),
              trigger: 'blur',
            },
          ],
        },
        isAdmin: true,
        profileService: new ProfileServiceProxy(),
        currentUserProfileEditDto: new CurrentUserProfileEditDto(),
      };
    },
    created() {
      this.fillServiceProxy();
      this.profileService.getCurrentUserProfileForEdit().then((result) => {
        this.currentUserProfileEditDto = result;
        this.isAdmin =
          this.currentUserProfileEditDto.userName ===
          this.appConsts.userManagement.defaultAdminUserName;
      });
    },
    methods: {
      /** 保存 */
      save(e): void {
        e.preventDefault();
        (this.$refs.formRef as any).validate().then(() => {
          this.saveLoading = true;
          this.profileService
            .updateCurrentUserProfile(this.currentUserProfileEditDto)
            .finally(() => {
              this.saveLoading = false;
              this.saving = false;
            })
            .then((res) => {
              this.notify.success(this.l('SavedSuccessfully'));
              this.success(res);
            });
        });
      },
    },
  });
</script>
<style lang="less" scoped>
  .modal-body {
    padding: 0 130px;
  }
</style>
